<template>
    <el-container>
        <el-header>欢迎： {{username}}  <el-button @click="quit">退出</el-button></el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                    :default-active="$route.path"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    class="el-menu-vertical-demo">
                    <el-menu-item :index="item.res_router" v-for="item in menuList" :key="item.id">
                        <i class="el-icon-setting"></i>
                        <span slot="title">
                            <router-link :to="item.res_router">{{item.res_name}}</router-link >
                        </span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    data(){
        return {
            username:localStorage.getItem('username'),
            menuList:[]
        }
    },
    created(){
        console.log(this.$route);
        this.$http.get('/api/menu',{params:{role_id:localStorage.getItem('role_id')}}).then(res => {
            if(res.data.code === 1){
                console.log(res.data.data)
                this.menuList = res.data.data;
            }
        })
    },
    methods:{
        quit(){
            //1.清空本地存储
            localStorage.clear();
            //2.调到登录
            this.$router.replace('/login');
        }
    }
}
</script>

<style>
    .el-container{
        height: 100%;
    }
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
    
    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-menu-item.is-active a{
        color:red;
    }
  
</style>